<template>
  <div class="padding grid-content height-100">
    <grid-item-one title="行业指标综合分析"></grid-item-one>
    <grid-item-two title="行业影响力分析"></grid-item-two>
    <grid-item-three title="行业能耗分析"></grid-item-three>
  </div>
</template>

<script>
import GridItemOne from './grid-item-one'
import GridItemTwo from './grid-item-two'
import GridItemThree from './grid-item-three'

export default {
  name: 'energy-efficiency-analysis-industry',
  components: {
    GridItemOne,
    GridItemTwo,
    GridItemThree
  }
}
</script>

<style lang="scss" scoped>
  @import "@/assets/style/variable.scss";

  .grid-content {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 1fr;
    grid-gap: $gutter;

    ::v-deep .info-head {
      padding: 20px $gutter 0 $gutter;
      font-size: 16px;
    }

    .content-block {
      background: white;
      border-radius: 4px;
    }

    .block---1 {
      grid-column-start: 1;
      grid-column-end: 4;
    }
    .block---2 {
      grid-column-start: 4;
      grid-column-end: 6;
    }
    .block---3 {
      grid-column-start: 1;
      grid-column-end: 6;
    }
  }
</style>
